<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>ScrollMagic Plugin: GSAP</title>
	
  <script src="scripts/prettify/prettify.js"> </script>
  <script src="scripts/prettify/lang-css.js"> </script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
	<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
	<link rel="shortcut icon" href="../assets/img/favicon.ico" type="image/x-icon">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cosmo.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">ScrollMagic</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Controller.html">Controller</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html">Scene</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Scene.html#event:add">add</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:change">change</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:destroy">destroy</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:end">end</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:enter">enter</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:leave">leave</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:progress">progress</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:remove">remove</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:shift">shift</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:start">start</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:update">update</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Plugins<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="animation.GSAP.html">GSAP</a>
						</li>
						
						<li>
							<a href="animation.Velocity.html">Velocity</a>
						</li>
						
						<li>
							<a href="debug.addIndicators.html">addIndicators</a>
						</li>
						
						<li>
							<a href="framework.jQuery.html">jQuery</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					


	<h1 class="page-title">
        Plugin: GSAP</h1>
    
<section>

<article>
    <div class="container-overview">
    

    
        
            <div class="description"><p>This plugin is meant to be used in conjunction with the Greensock Animation Plattform.<br>It offers an easy API to trigger Tweens or synchronize them to the scrollbar movement.</p>
<p>Both the <code>lite</code> and the <code>max</code> versions of the GSAP library are supported.<br>The most basic requirement is <code>TweenLite</code>.</p>
<p>To have access to this extension, please include <code>plugins/animation.gsap.js</code>.</p></div>
        

        
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="plugins_animation.gsap.js.html">plugins/animation.gsap.js</a>, <a href="plugins_animation.gsap.js.html#sunlight-1-line-8">line 8</a>
    </li></ul></dd>
    

    

    

    
</dl>


        
    
    </div>

    

    

    
        <h3 class="subsection-title">Requires</h3>

        <ul>
            <li><a href="http://greensock.com/gsap">GSAP ~1.14.x</a></li>
        </ul>
    

    

    

    

    
        <h3 class="subsection-title">Scene Constructor Extension</h3>

        <dl>
            
<dt>
    <h4 class="name" id="newScrollMagic.Sceneoptions"><span class="type-signature"></span>new ScrollMagic.Scene<span class="signature">(<span class="optional">options</span>)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Every instance of ScrollMagic.Scene now accepts an additional option.<br>See <a href="ScrollMagic.Scene.html"><code>ScrollMagic.Scene</code></a> for a complete list of the standard options.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>Options for the Scene. The options can be updated at any time.</p>
                <h6>Properties</h6>
                

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>tweenChanges</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>Tweens Animation to the progress target instead of setting it.<br>                                                       Does not affect animations where duration is <code>0</code>.</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="plugins_animation.gsap.js.html">plugins/animation.gsap.js</a>, <a href="plugins_animation.gsap.js.html#sunlight-1-line-53">line 53</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">var scene = new ScrollMagic.Scene({tweenChanges: true});</pre>


    
</dd>

        </dl>
    
        <h3 class="subsection-title">Scene Control Methods</h3>

        <dl>
            
<dt>
    <h4 class="name" id="Scene.removeTween"><span class="type-signature"></span>Scene.removeTween<span class="signature">(<span class="optional">reset</span>)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Remove the tween from the scene.<br>This will terminate the control of the Scene over the tween.</p>
<p>Using the reset option you can decide if the tween should remain in the current state or be rewound to set the target elements back to the state they were in before the tween was added to the scene.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>reset</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>true</code> the tween will be reset to its initial values.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="plugins_animation.gsap.js.html">plugins/animation.gsap.js</a>, <a href="plugins_animation.gsap.js.html#sunlight-1-line-293">line 293</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// remove the tween from the scene without resetting it
scene.removeTween();

// remove the tween from the scene and reset it to initial position
scene.removeTween(true);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="Scene.setTween"><span class="type-signature"></span>Scene.setTween<span class="signature">(TweenObject, duration, params)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Add a tween to the scene.<br>If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).  </p>
<p>If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.<br>For a scene with a duration of <code>0</code>, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.<br>To gain better understanding, check out the <a href="../examples/basic/simple_tweening.html">Simple Tweening example</a>.</p>
<p>Instead of supplying a tween this method can also be used as a shorthand for <code>TweenMax.to()</code> (see example below).</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>TweenObject</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>
|

<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>A TweenMax, TweenLite, TimelineMax or TimelineLite object that should be animated in the scene. Can also be a Dom Element or Selector, when using direct tween definition (see examples).</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>duration</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>
|

<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>A duration for the tween, or tween parameters. If an object containing parameters are supplied, a default duration of 1 will be used.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>params</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The parameters for the tween</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="plugins_animation.gsap.js.html">plugins/animation.gsap.js</a>, <a href="plugins_animation.gsap.js.html#sunlight-1-line-193">line 193</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// add a single tween directly
scene.setTween(TweenMax.to("obj"), 1, {x: 100});

// add a single tween via variable
var tween = TweenMax.to("obj"), 1, {x: 100};
scene.setTween(tween);

// add multiple tweens, wrapped in a timeline.
var timeline = new TimelineMax();
var tween1 = TweenMax.from("obj1", 1, {x: 100});
var tween2 = TweenMax.to("obj2", 1, {y: 100});
timeline
		.add(tween1)
		.add(tween2);
scene.addTween(timeline);

// short hand to add a TweenMax.to() tween
scene.setTween("obj3", 0.5, {y: 100});

// short hand to add a TweenMax.to() tween for 1 second
// this is useful, when the scene has a duration and the tween duration isn't important anyway
scene.setTween("obj3", {y: 100});</pre>


    
</dd>

        </dl>
    
        <h3 class="subsection-title">Scene Parameters (getter / setter)</h3>

        <dl>
            
<dt>
    <h4 class="name" id="Scene.tweenChanges"><span class="type-signature"></span>Scene.tweenChanges<span class="signature">(<span class="optional">newTweenChanges</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the tweenChanges option value.<br>This only affects scenes with a duration. If <code>tweenChanges</code> is <code>true</code>, the progress update when scrolling will not be immediate, but instead the animation will smoothly animate to the target state.<br>For a better understanding, try enabling and disabling this option in the <a href="../examples/basic/scene_manipulation.html">Scene Manipulation Example</a>.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newTweenChanges</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new tweenChanges setting of the scene.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="plugins_animation.gsap.js.html">plugins/animation.gsap.js</a>, <a href="plugins_animation.gsap.js.html#sunlight-1-line-65">line 65</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.change</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current tweenChanges option value.</p>

	{
<span class="param-type">boolean</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current tweenChanges option
var tweenChanges = scene.tweenChanges();

// set new tweenChanges option
scene.tweenChanges(true);</pre>


    
</dd>

        </dl>
    

    

    
</article>

</section>




				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		© Jan Paepke 2015
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc" target="_blank">JSDoc 3.5.5</a>
		using a customized version of the <a href="https://github.com/terryweiss/docstrap" target="_blank">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>

	<script> prettyPrint(); </script>
	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		function openDeeplinkedElement (skipAni) {
			try {
				$("dt h4.member-collapsed").filter(window.location.hash.substring(1).replace(":", "\\:")).trigger("click", skipAni);
			} catch (e) {
				console.warn("ah ah ah! :p");
			}
		}
		$( function () {
			$( "#toc" ).toc( {
			    anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1:visible,h2:visible,h3:visible,h4:visible",
				onScrollFinish : openDeeplinkedElement,
				highlightOffset : 10,
				scrollOffset: 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
	<script>
		$( function () {
			// $('#main').localScroll({
			// 	offset: { top: 56 } //offset by the height of your header (give or take a few px, see what works for you)
			// });
			// workaround for anchors below header...
			window.setTimeout(function () {
				$(document).scrollTop($(document).scrollTop()-60);
			}, 1)
			
			var hash = window.location.hash.substring(1).replace(":", "\\:");
			$( "dt h4.name" ).each( function () {
				var $this = $( this );
				var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
				var dt = $this.parents( "dt" );
				var children = dt.next( "dd" );

				$this.append( icon ).css( {cursor : "pointer"} );
				$this.addClass( "member-collapsed" ).addClass( "member" );
				if (hash != $this.attr("id")) {
					children.hide();
				}
				$this.toggle( function (e, skipAni) {
					var scrollPos = $(document).scrollTop();
					window.location.hash = $(this).attr("id");
					$(document).scrollTop(scrollPos);
					icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
					$this.addClass( "member-open" ).removeClass( "member-collapsed" );
					children.slideDown(skipAni ? 0 : undefined);
				}, function () {
					icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
					$this.addClass( "member-collapsed" ).removeClass( "member-open" );
					children.slideUp();
				} );
			} );
			// open if deeplinked
			if (hash.length > 0)
				openDeeplinkedElement(true);
		} );
	</script>
	

	<script type="text/javascript" src="../assets/js/tracking.js"></script>
</body>
</html>